
<template>
    <div class="news_bd">

        <div class="main pro">
            <loading :isOpen="isOpen"></loading>
            <div class="pro_banner">
                <img :src="banner">
            </div>
            <el-row class="pro_bd" :gutter="24">
                <el-col :span="6" class="left">
                    <div class="grid-content">
                        <ul>
                            <li v-bind:class="{'left_active':sort.id==cid_focus,'back_active':cid==sort.id,'left_active2':index==0 && $route.params.cid==null}" v-for="(sort,index) in left" :key="sort.side" @click="active($event,index,sort.id)" :id="sort.id">{{sort.title}}</li>
                        </ul>

                        <div class="ad" v-show="no_adver==false">
                            <a :href="adver_url">
                            <img :src="adver.img">
                            </a>
                        </div>
                        <p style="display:none" ref="cid">{{$route.params.cid}}</p>
                        <!-- <p>{{cid_focus}}</p> -->
                        
                    </div>
                </el-col>

                <el-col :span="18">
                    <div class="pro_img grid-content">
                        <div class="noData" v-if="page==0">暂无数据</div>
                        <el-row>
                            <el-col :span="24" v-for="list in news" :key="list.news" class="news_item_box">
                                <div class="grid-content bg-purple-light news_item">
                                    <router-link :to="{name:'news_artical',params:{id:list.id,cid:cid_focus}}">
                                        <div class="news_img">
                                            <img :src="list.cover[0]">
                                        </div>
                                        <div class="news_txt">
                                            <p class="news_tle">{{list.title}}</p>
                                            <p class="news_body">{{list.abstract}}</p>
                                            <p class="news_time">
                                                <span>{{list.author_name}}</span>
                                                <span>{{list.create_time}}</span>
                                            </p>
                                        </div>
                                    </router-link>
                                </div>
                            </el-col>

                        </el-row>
                        <div id="page" v-if="videoData">
                            <el-pagination @current-change="pageIndexChange" :page-size="8" :current-page="current_page" layout="prev, pager, next" :total="sum_.total">
                            </el-pagination>
                        </div>
                    </div>

                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
var page = 1;
import loading from './Loading'
export default {
    name: 'news',
    data() {
        return {
            isActive: false,
            news: [],
            banner: [],
            left: [],
            id: '',
            page: [],
            current_page: 1,
            cid_focus: 0,
            isOpen: true,
            videoData:true,
            com_id:localStorage.getItem("companyid"),
            sum_:[],
            adver:[],
            no_adver:false,
            company_name:[],
            adver_url:[]
        }
    },
     components:{ loading},
    mounted() {
        $(".is-active").removeClass("is-active");
        var self=this;
        setTimeout(function(){
            var com_id=localStorage.getItem("companyid");
            self.com_id=com_id;
            self.loadLeftside();
            //this.loadnews();
            self.loadBanner();
            self.loadAdver();
        },300)
       
    },
    methods: {        
        loadBanner() {            
            //console.log(this.com_id)
            this.$http.get('http://thy.588net.com/index.php/api/Company/get_company_index?' + 'company_id=' + this.com_id).then(function(res) {
                this.banner = res.body.data.company.article_banner;
                this.company_name=res.body.data.company.name;
                document.title = '企业动态-'+this.company_name;
            })
        },
        loadLeftside() {
            //console.log('leftside')
            this.$http.get('http://thy.588net.com/index.php/article/article/get_article_cate?'+ 'company_id=' + this.com_id).then(function(res) {
                this.left = res.body.data;
                //this.default_cid=res.body.data[0].id;
                this.id = res.body.data[0].id;
                this.cid_focus = this.$route.params.cid;
                //alert(this.id)
                this.loadnews(this.id)
            })
        },
        loadnews(id, page) {
            //alert(id)
            //console.log('loadnews')
            this.cid = this.$refs.cid.innerHTML;
            var page = this.current_page;
            //var id = this.id;
            window.scrollTo(0, 0);
            if (this.$refs.cid.innerHTML == '') {
                this.$http.get('http://thy.588net.com/index.php/article/Article/get_list?' + 'company_id=' + this.com_id + '&page_size=' + 6 + '&page=' + page + '&cid=' + id + '&is_web=' + 1).then(function(res) {
                    this.news = res.body.data.data;
                    this.sum_=res.data.data;
                    this.page = res.body.data.total;
                    if(this.page-8<=0){
                    this.videoData=false;
                }
                this.isOpen = false;
                     //console.log(this.news + 'cid为空');
                })
            } else {
                this.$http.get('http://thy.588net.com/index.php/article/Article/get_list?' + 'company_id=' + this.com_id + '&page_size=' + 6 + '&page=' + page + '&cid=' + this.cid + '&is_web=' + 1).then(function(res) {
                    this.news = res.body.data.data;
                    this.sum_=res.data.data;
                    this.page = res.body.data.total;
                    if(this.page-8<=0){
                    this.videoData=false;
                    }
                    this.isOpen = false;
                    //console.log(this.news + 'cid不为空');
                })
            }
        },
        pageIndexChange: function(val) {
            this.current_page = val;
            //console.log(this.id)
            this.loadnews(this.id);
        },
        active(event, index, id) {
            //event 当前对象  index 为遍历条目索引  id为遍历条目id
            page = 1;//初始化请求第一页
            this.current_page = 1;
            this.cid_focus = id;//当前高亮
            this.id = id;//更新id值
            console.log(this.id)
            //this.loadLeftside(this.id);//注入更新值
            //this.loadnews(this.id,this.current_page);//注入更新值
            this.$http.get('http://thy.588net.com/index.php/article/Article/get_list?' + 'company_id=' + this.com_id + '&page_size=' + 6 + '&page=' + page + '&cid=' + this.id + '&is_web=' + 1).then(function(res) {
                this.news = res.body.data.data;
                this.sum_=res.data.data;
                this.page = res.body.data.total;
                if(this.page-8<=0){
                    this.videoData=false;
                    //alert('暂无数据')
                }else{
                    this.videoData=true;
                }
                //console.log(this.news + 'cid为空');
            })
             this.$route.params.cid = id;
        },
        getStatus(urlStr) {
            var urlStrArr = urlStr.split('/')
            return urlStrArr[urlStrArr.length - 1]
        },
        loadAdver:function(){
            this.$http.get('http://thy.588net.com/index.php/api/company.adv/get_adv?' + 'company_id=' + this.com_id +'&position='+'article').then(function(res) {
               console.log(res.body.data)
                var len=res.body.data.adv;
               if(res.body.code==1002){
                this.no_adver=true;
               }

               if(res.body.code==200){
                  for(var i=0;i<len.length;i++){
                       if(len[i].position=="article_aside"){
                           this.adver=len[i];
                           var init_='http://'
                           var ad_url=this.adver.url;
                           if(ad_url==''){
                                 this.adver_url='javascript:'
                           }else{
                                 if(ad_url.indexOf("http://")>=0){
                                    //alert("格式正确")
                                    this.adver_url=ad_url;
                                }else{
                                    //alert("格式bu正确")
                                    this.adver_url=init_.concat(ad_url);
                                    //console.log(adver_url)
                                }
                           }
                            
                           
                       }
                       //console.log(this.adver.url)
                   }
                   this.no_adver=false;
               }
               
            })
        }
    },
    activated: function() {
        //console.log('actived')
        var self=this;
        //this.loadnews();
        setTimeout(function() {
            self.loadLeftside();
        self.loadBanner();
        }, 500);
        
    }
}

</script>


<style scoped>

.noData{
    font-size: 20px;
    color:#5a5a5a;
    padding: 20px;
}
.left_active2 {
    background: #2277ff;
    color: #fff!important;
}
#page {
    text-align: center;
    padding: 15px 0;
}

.news_item_box {
    /* padding-right: 30px; */
    border-bottom: 1px solid #d8d8d8;
    padding: 20px 0;
}

.news_item {
    overflow: hidden;

    height: 150px;


    background: #fff!important;
    cursor: pointer;
    /* box-sizing: content-box; */
}

.news_item_box:nth-last-of-type(1) {
    border-bottom: 0px solid #fff;
    padding-bottom: 0
}

.news_item_box:nth-of-type(even) {
    padding-right: 0
}

.news_item .news_img {
    float: left;
    margin-right: 20px;
    overflow: hidden;
}

.news_item .news_img img {
    vertical-align: bottom;
    height: 150px;
    width: 250px;
    transition: all ease .8s;
}

.news_item .news_img img:hover {
    transform: scale(1.1)
}

.news_txt {
    /* display: flex;
    flex-direction: column; */
    height: 150px;
    background: #fff;
    /* padding: 10px 0; */
}

.news_txt p {
    margin: 0;
}

.news_txt .news_tle {
    font-size: 18px;
    color: #5a5a5a;
    height: 40px;
    /* line-height: 40px; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.news_txt .news_body {
    height: 90px!important;
    font-size: 14px;
    color: #5A5A5A;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 28px;
    overflow: hidden;
}

.news_time {
    height: 20px;
    font-size: 14px;
    color: #a5a5a5
}

.news_time span:nth-of-type(1) {
    margin-right: 20px
}

.loadTip {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    clear: both;
    color: #a5a5a5;
}

.loadTip img {
    width: 40px;
    height: 40px;
    vertical-align: bottom;
    margin-right: 10px
}

.showLoad {
    display: none
}


/* .pro_list {
    padding: 20px 0;
    background: #fff;
    margin-bottom: 20px
} */

a {
    color: #a5a5a5;
    text-decoration: none
}

.news_bd {
    background: #f5f5f5!important
}

.left_id {
    display: none
}

.pro_img .el-col-12 {
    width: 48%;
    margin-right: 2%;
}

.pro_img .el-col-12:nth-of-type(even) {
    margin-right: 0
}

.pro_bd {
    margin-top: 24px
}

.pro_banner {
    width: 100%;
    height: 200px;
}


.left ul {
     box-shadow:0px 0px 6px 0px #d8d8d8;
    background: #fff;
}

.left ul li {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #5a5a5a;
    cursor: pointer;
}

.left_active {
    background: #2277ff;
    color: #fff!important;
}

.pro_banner img {
    width: 100%;
    height: 200px;
}

.main {
    max-width: 1200px;
    margin: 0 auto;
    /* overflow: hidden; */
}

.pro_item_desc p {
    margin: 0;
}

.pro_img {
    /* margin-bottom: 20px; */
    padding: 0 20px;
    box-shadow: 0px 0px 6px 0px #d8d8d8;
    margin-bottom: 3px;
    padding-bottom:20px;
    background:#fff;
    /* height: 800px; */
}

.pro_title {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #5a5a5a;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.pro_desc {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    color: red;
}

.pro_price {
    height: 40px;
    line-height: 40px
}

.pro_item {
    border-radius: 6px;
    /* border: 1px solid #d8d8d8; */
    /* margin-bottom: 20px */
}

.pro_price b {
    float: right
}

.pro_price span {
    float: right;
    font-size: 26px;
    color: red
}

.pro_item_img img {
    width: 100%;
    height: 400px;
    transition: all ease .8s;
}

.pro_item_img {
    overflow: hidden;
    width: 100%;
    height: 400px;
}

.pro_item_img img:hover {
    transform: scale(1.2)
}

.pro_name {
    height: 30px;
    line-height: 30px;
}

.pro_price {
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px!important
}

.pro_price span {
    color: #ff0000;
}

.ask {
    margin: 10px 0;
}

.el-row {

    &:last-child {
        margin-bottom: 0;
    }
}



.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    min-height: 36px;
  
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.pagenation {
    text-align: center
}
</style>
